<!-- 对 divider 组件的编辑 -->
<template>
  <div class="timeaxis-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-row>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="当前样式" style="margin-bottom:0px;">
                    <el-select size="mini" v-model="data.theme" placeholder="请选择">
                      <el-option :label="'一左一右'" :value="'1'"></el-option>
                      <el-option :label="'全部在右'" :value="'2'"></el-option>
                      <el-option :label="'时间左，内容右'" :value="'3'"></el-option>
                      <el-option :label="'上下结构'" :value="'4'"></el-option>
                      <el-option :label="'单列轮播'" :value="'5'"></el-option>
                      <el-option :label="'多列轮播'" :value="'6'"></el-option>
                      <el-option :label="'纵向右侧标签切换'" :value="'7'"></el-option>
                      <el-option :label="'纵向左侧标签切换'" :value="'8'"></el-option>
                      <el-option :label="'部分隐藏'" :value="'9'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form v-if="data.theme === '1'" :label-width="formLabelWidth">
                  <el-form-item label="起始位置" style="margin-bottom:0px;">
                    <el-radio-group v-model="data.themelr">
                      <el-radio :label="1">先右边</el-radio>
                      <el-radio :label="2">先左边</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
                <el-form v-if="data.theme === '5'" :label-width="formLabelWidth">
                  <el-form-item label="滚动速度" style="margin-bottom:0px;">
                    <el-select size="mini" v-model="data.themeintertime" placeholder="请选择">
                      <el-option :label="'2秒'" :value="2000"></el-option>
                      <el-option :label="'3秒'" :value="3000"></el-option>
                      <el-option :label="'4秒'" :value="4000"></el-option>
                      <el-option :label="'5秒'" :value="5000"></el-option>
                      <el-option :label="'6秒'" :value="6000"></el-option>
                      <el-option :label="'8秒'" :value="8000"></el-option>
                      <el-option :label="'10秒'" :value="10000"></el-option>
                      <el-option :label="'12秒'" :value="12000"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <FontFamily :title ="'标题字体'" :defValue="data.titleStyle.fontFamily" :chgValue="(d)=>{data.titleStyle.fontFamily = d}" />
              </el-col>
              <el-col :span="12">
                <FontSize :defValue="data.titleStyle.fontSize" :chgValue="(d)=>{data.titleStyle.fontSize = d}" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <FontWeight :defValue="data.titleStyle.fontWeight" :chgValue="(d)=>{data.titleStyle.fontWeight = d}" />
              </el-col>
              <el-col :span="12">
                <FontStyle :defValue="data.titleStyle.fontStyle" :chgValue="(d)=>{data.titleStyle.fontStyle = d}" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <Color :defValue="data.titleStyle.color" :chgValue="(d)=>{data.titleStyle.color = d}" />
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="数据内容" name="2">
            <div style="margin-bottom:12px; text-align:right;">
              <el-button type="success" @click="addDataList" size="small">添加</el-button>
            </div>
            <el-table :data="data.dataList" style="width: 100%" height="250">
              <el-table-column prop="title" label="时间标题">
              </el-table-column>
              <el-table-column label="排序" width="120" align="center">
                <template slot-scope="scope">
                    <div class="noselect" style="padding: 0 12px;">
                      <span @click.stop='orderUp(scope.$index)'><i
                          :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow499':true , 'displayNo': scope.$index === 0}"></i>
                      </span>
                      <span @click.stop='orderDown(scope.$index)'>
                        <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow505':true, 'displayNo': scope.$index === (data.dataList.length - 1)}"></i>
                      </span>
                    </div>
                  </template>
              </el-table-column>
              <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                  <el-button @click="editorDataItem(scope.$index)" type="text" size="small">编辑</el-button>
                  <el-button @click="deleteDataItem(scope.$index)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>

    <DialogTimeContentSave ref="dialogTimeContentSave" />
  </div>
</template>

<script>

import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import FontStyle from '@/components/common/design/dialog/component/formitem/FontStyle.vue'
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

import DialogTimeContentSave from '@/components/common/design/dialog/component/timeaxis/DialogTimeContentSave.vue'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTTIMEAXIS, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data
      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      formLabelWidth: '120px',
      name: '时间轴',
      bjComponent: null,
      data: null
    }
  },
  watch: {
  },
  methods: {
    addDataList () {
      // 弹窗然后编辑最后回调添加内容
      let emptyDataItem = {
        title: '',
        info: ''
      }
      this.$refs['dialogTimeContentSave'].open('添加时间数据内容', emptyDataItem, (dataItem) => {
        this.data.dataList.push({
          title: dataItem.title,
          info: dataItem.info
        })
      })
    },
    orderUp (index) {
      if (index === 0) {
        return
      }
      let order = this.data.dataList
      let temp = order[index - 1]
      order[index - 1] = order[index]
      order[index] = temp
      this.data.dataList = JSON.parse(JSON.stringify(order))
    },
    orderDown (index) {
      if (index === (this.data.dataList.length - 1)) {
        return
      }
      let order = this.data.dataList
      let temp = order[index + 1]
      order[index + 1] = order[index]
      order[index] = temp
      this.data.dataList = JSON.parse(JSON.stringify(order))
    },
    deleteDataItem (index) {
      this.data.dataList.splice(index, 1)
    },
    editorDataItem (index) {
      let item = this.data.dataList[index]
      if (!item) {
        return
      }
      this.$refs['dialogTimeContentSave'].open('编辑时间数据内容', item, (dataItem) => {
        this.data.dataList.splice(index, 1, dataItem)
      })
    },
    // .............
    close () {
      this.dialogShow = false
      this.activeName = '1'
      this.bjComponent = null
      this.data = null
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    FontFamily,
    FontWeight,
    FontSize,
    FontStyle,
    Color,
    DialogTimeContentSave
  }
}

</script>

<style scoped>
.edit-container-u {
  width: 750px;
  min-height: 350px;
}
.timeaxis-edit /deep/ .el-table th {
  padding: 5px 0;
  color: #555;
}
.timeaxis-edit /deep/ .el-table td {
  padding: 5px 0;
}
.timeaxis-edit .icon {
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  height: 100%;
  display: inline-block;
}
.timeaxis-edit .icon:hover {
  color: #409eff;
}
.timeaxis-edit .displayNo {
  color: #888888;
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
